const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const isProd = process.env.NODE_ENV === "production";

const entrys =  {main: "./app/main.js", login: "./app/login_main.js"}

module.exports = {
    mode: isProd ? "production" : "development",
    entry: entrys,
    output: {
        path: isProd
            ? path.resolve(__dirname, "server/public")
            : path.resolve(__dirname, "dist"),
        filename: "js/[name].js?[hash:8]",
        chunkFilename: "js/[name].js?[hash:8]",
        publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: {
                    loader: "vue-loader",
                    options: {
                        loaders: {
                            less: "vue-style-loader!css-loader!less-loader"
                        }
                    }
                },
                include: [path.resolve(__dirname, "app")]
            },
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader"
                },
                include: [path.resolve(__dirname, "app")]
            },
            {
                test: /\.(css|less)$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    name: "img/[name].[hash:7].[ext]"
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    name: "media/[name].[hash:7].[ext]"
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    name: "fonts/[name].[hash:7].[ext]"
                }
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: isProd
                ? path.resolve(__dirname, "server/views/index.html")
                : "index.html", // 配置输出文件名和路径
            template: "./app/tpl/index.html", // 配置文件模板,
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunks: ['main', 'vendors']
        }),
        new HtmlWebpackPlugin({
            filename: isProd
                ? path.resolve(__dirname, "server/views/login/index.html")
                : "login/index.html", // 配置输出文件名和路径
            template: "./app/tpl/index.html", // 配置文件模板,
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: true
            },
            chunks: ['login', 'vendors']
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization: {
        splitChunks: {
            chunks: "all",
            minSize: 30000,
            minChunks: 1,
            name: "vendors",
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/
                }
            }
        }
    },
    resolve: {
        extensions: [".js", ".json", ".vue"],
        alias: {
            "@": path.resolve(__dirname, "app"),
            vue$: "vue/dist/vue.esm.js"
        }
    },
    devServer: {
        hot: true,
        inline: true,
        compress: true,
        port: 8080,
        proxy: {
            "/api": {
                target: "http://127.0.0.1:9000/"
            }
        }
    }
};
